<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title><meta name="description" content="本页所有尺寸都使用rem布局，也是移动端开发app常用尺寸" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<style type="text/css">
               *{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 100%;
				margin: 0 auto;
				max-width: 640px;
				min-width: 320px;
				position: relative;
			}
			.nav_area{
				width: 100%;
				height:1.2rem ;
				background: url(img/nav.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center;
				position: fixed;
				z-index: 999;
				display: flex;
				align-items: center;
				left: 0px;
				top: 0px;
				margin: 0 auto;
			}
			.nav_area>a>img {
				margin-left: 0.5rem;
				width: 0.4rem;
				height: 0.58rem;
			}
			.nav_area>p{
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 0.45rem;
				line-height: 1.2rem;
				color: white;
			}		
			.lia>ul>li{
				width: 4.4rem;
				height: 1.2rem;
				float: left;
				text-align: center;
				line-height: 1.2rem;
				cursor: pointer;
			}	
			.lia{
				width: 9rem;
				height: 1.2rem;
				display: flex;
				margin: 0 auto;
				margin-top: 1.2rem;
			}
			.lia>ul>li:nth-of-type(2){
			   border-left:1px solid rgba(0,0,0,.1);
			}
			.si{
				width: 9rem;
				height: 10rem;
				margin: 0 auto;
				display: flex;
				flex-wrap:wrap ;
				justify-content: center;
			}
			.si>ul>li{
				float: left;
				width: 9rem;
				height: 1.9rem;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid rgba(0,0,0,.1);
				margin-top: 0.5rem;
			}
			.xinwen{
				display: block;
			}
			.si>ul>li>img{
				width: 2.4rem;
				height: 1.5rem;
				align-self: center;
			}
			.si>ul>li>div{
				width: 6.2rem;
				height: 1.9rem;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav_area">
				<a href="#"><img src="img/fanhui@2x.png"/></a>
				<p>新闻活动</p>
			</div>
			<div class="lia">
				<ul>
					<li class="xinwen"id="a1">新闻活动</li>
					<li class="xinwen3">焦点新闻</li>
				</ul>
			</div>
			<div class="si">
				<ul class="xinwen1">
					<li><img src="img/wodedengji@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/pingjia@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/qiyerenzheng@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/shuju@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
				</ul>
				<ul style="display: none;"class="xinwen2">
					<li><img src="img/fanyong@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/tousu@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/youhuijuan@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
					<li><img src="img/tuikuan@2x.png"/><div><p style="font-size: 0.4rem;">猫空第8届插画比赛来啦~</p><p style="margin-top: 0.3rem;">你是否也做了一个别人 眼里的白日梦，朝政素食的反方向独行</p></div></li>
				</ul>
			</div>
		</div>
		
	</body>
	<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var $li=$(".lia ul li");
//			var $li1=$(".si ul")
//			for(var i =0;i<$li.length;i++){
//				$li.eq(i).click(function(){
//					for(var j =0;j<$li.length;j++){
//						if($==$li.eq(j)){
//							$li.eq(j).attr("class","xinwen")
//						    $li1.eq(j).attr("class","xinwen1")
//						}else{
//							$li.eq(j).removeAttr("class","")
//							$li1.eq(j).removeAttr("class","")
//						}
//					}
//				})
//			}
        $(".xinwen").click(function(){
        	$(".xinwen1").show(1000)
        	$(".xinwen2").hide(1000)
        }) 
        $(".xinwen3").click(function(){
        	$(".xinwen1").hide(1000)
        	$(".xinwen2").show(1000)
        })
       for(var i=0;i<$li.length+1;i++){
       	$li.eq(i).click(function(){
       		for(var i =0;i<$li.length+1;i++){
       			$li.eq(i).attr("id","a1")
       			$li.eq(i).removeAttr("id","")
       		}
       	})
       }

		})
	</script>
</html>
